import React from "react"
import { withRouter } from "react-router-dom"
import { inject, observer } from "mobx-react"
import queryString from "query-string"
@withRouter
@inject("PlaylistStore")
@observer
class ChartSong extends React.Component {
    jump(id) {
        this.props.history.push(`/Discover/player?id=${id}`)
    }
    back(){
        this.props.history.go(-1) 
    }
    forward(props){
        this.props.history.push("/Discover")
    }
    componentDidMount() {
        let { search } = this.props.history.location
        let id = queryString.parse(search)
        // console.log(id)
        this.props.PlaylistStore.get_details(id.id)
    }
    render() {
        // console.log(this.props.PlaylistStore.details_store, '======')
        let arr = this.props.PlaylistStore.details_store
        return (
            <fieldset className="ChartSong_backUrl">
                <div className="ChartSong_container">
                    <span onClick={this.back.bind(this)}><svg t="1574216299152" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="957" width="32" height="32"><path d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.701-14.563-15.701-38.229 0-52.792L738.418 13.198c15.701-14.563 41.187-14.563 56.889 0 15.701 14.564 15.701 38.23 0 52.793L314.027 512l481.28 446.009c15.701 14.563 15.701 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z" p-id="958" fill="#cdcdcd"></path></svg></span>
                    <h1>排行榜</h1>
                    <span onClick={this.forward.bind(this)}><svg t="1574216335289" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1221" width="32" height="32"><path d="M257.138 2.276c10.24 0 20.594 3.64 28.444 10.922L795.307 485.604c15.70100001 14.563 15.701 38.229 0 52.792L285.582 1010.802c-15.70100001 14.563-41.187 14.563-56.889 0-15.701-14.564-15.70100001-38.23 0-52.793L709.973 512l-481.28-446.009c-15.70100001-14.563-15.70100001-38.23 0-52.793 7.851-7.282 18.205-10.922 28.445-10.922z" fill="#8a8a8a" p-id="1222"></path></svg></span>
                </div>
                <ol className="ChartSong_ol">
                    {arr.map((item, index) =>
                        <li key={index} onClick={this.jump.bind(this, item.id)} className="ChartSong_li"><h3>{item.name}</h3></li>
                    )}
                </ol>
            </fieldset>
        )

    }
}
export default ChartSong